<template>
	<view>
		<view class="status_bar">
		    <!-- 这里是状态栏 -->
		</view>
		<uni-section title="自定义icon" type="line">
			<uni-search-bar placeholder="搜索活动" @confirm="search" @cancel="cancel" cancel-text="cancel">
				<uni-icons slot="search" color="#333333" size="18" type="home" />
			</uni-search-bar>
		</uni-section>
		<view class="uni-flex uni-row" style="margin-top: 5px; font-size: 26rpx; color:#666666;-webkit-justify-content: space-between;justify-content: space-between;">
			<view class="uni-flex uni-row">
				<view class="shadow uni-flex" style="margin-left:12px ;margin-right: 5px;height: 30px;width: 85px; border-radius: 5px;">
					<picker @change="stateChange" :value="state_index" :range="state_array" style="align-self: center;margin: 0 auto;">
						<view >{{state_array[state_index]}}</view>
					</picker>
				</view>
				<view class="shadow uni-flex" style="margin-left:10px ;margin-right: 10px;height: 30px;width: 85px;border-radius: 5px;">
					<picker @change="typeChange" :value="type_index" :range="type_array" style="align-self: center;margin: 0 auto;">
						<view >{{type_array[type_index]}}</view>
					</picker>
				</view>
			</view>
		
			<view style="height: 30px;width: 85px;text-align: center;margin-right: 10px;line-height: 30px;" :class="seeme ? 'me_active' : 'me_unactive'" @click="onlyseeme">
				只看我的
			</view>
		</view>
		<!-- 活动列表 -->
		<view  v-if="getfinish" class="activity_main" style="width: 95%;margin-top: 10px; margin-left: 10px;">
			<view v-for="(activity,index) in activity_list" class="shadow" style="width: 45%;height: 250px;border-radius: 5px;margin: 8px;">
				<image mode='aspectFill' :src="httpurl+activity.a_cover" style="height: 165px;width: 165px;" @click="activity_detail(activity.a_id)"></image>
				<view style="margin-top: 10px; margin-left: 10px;font-weight: 500;">{{activity.a_name}}</view>
				<view style="margin-left: 10px;font-size: 13px;color: #f8af41;" >{{gettimerange(activity.a_start_time,activity.a_end_time)}}</view>
				<view style="margin-left: 10px;font-size: 13px;color: #808080;">{{activity.type_name}}</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				httpurl: getApp().globalData.weburl, //app.vue中定义的全局变量，后端ip地址
				state_array: ['全部', '报名中','进行中', '已结束'],
				state_index: 0,
				type_array: ['全部'],
				type_array_index:[],
				type_index: 0,
				seeme: false,
				activity_list:[],
				getfinish:false
				
				
			}
		},
		computed:{
			gettimerange() {
			    return (time1,time2) => {
					return time1.substr(5, 5)+"至"+time2.substr(5, 5);
			    }
			}
		},
		created(){
			this.getAllType();
			this.getAllActivity();
		},
		onPullDownRefresh() {
			console.log('下拉刷新');
			this.getAllType();
			this.getAllActivity();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 500);
		},
		methods: {
			activity_detail(id){
				console.log("点击");
				uni.navigateTo({
					url:"../activity_detail/activity_detail?a_id="+id
				});
			},
			getAllActivity(){
				var that=this;
				uni.request({
				    url: that.httpurl+'getAllStudentActivity/', //服务器地址+接口名
				    data: {
				    },
					method: 'POST',
				    header: { 
						'X-Requested-With': 'XMLHttpRequest',
						"Accept": "application/json",
						"Content-Type": "application/json; charset=UTF-8"
					},
					dataType: 'json',
				    success: (res) => {
						console.log("request success");
				        console.log(res.data);
						that.activity_list=res.data.activities;
						that.getfinish=true;
				    },
					fail: (res) => {
						console.log("request fail");
				    },
				});
			},
			getAllType(){
				var that=this;
				uni.request({
				    url: that.httpurl+'getAllType/', //服务器地址+接口名
				    data: {

				    },
					method: 'POST',
				    header: { 
						'X-Requested-With': 'XMLHttpRequest',
						"Accept": "application/json",
						"Content-Type": "application/json; charset=UTF-8"
					},
					dataType: 'json',
				    success: (res) => {
						console.log("request success");
				        console.log(res.data);
						var typelist=res.data.allType;
						typelist.unshift({"type_id": 0,"type_name": "全部"});
						that.type_array_index = typelist;
						var type_name_list=[];
						for(var i=0;i<typelist.length;i++){
							type_name_list.push(typelist[i].type_name);
						}
						that.type_array = type_name_list;
						
				    },
					fail: (res) => {
						console.log("request fail");
				    },
				});
			},
			stateChange(e){
				console.log('state选择改变，携带值为', e.detail.value)
				this.state_index = e.detail.value;
			},
			typeChange(e){
				console.log('type选择改变，携带值为', e.detail.value)
				this.type_index = e.detail.value;
			},
			search(res) {
				uni.showToast({
					title: '搜索到以下内容',
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			},
			onlyseeme(){
				this.seeme=!this.seeme;
			}
		}
	}
</script>

<style>
	.status_bar {
        height: var(--status-bar-height);
        width: 100%;
    }
	.me_active{
		background-color: #67bbff;
		color:white;
		border-radius: 5px;
		width: 20%;
		height: 10%;
	},
	.me_unactive{
		background-color: #e6e6e6;
		color:white;
		border-radius: 5px;
		width: 20%;
		height: 10%;
	}
	.shadow{
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, .3);
	}
	.activity_main{
		/* 定义flex容器 */
		display: flex;
		 /*设置容器内部容器的排列方向*/	
		flex-direction: row;
		flex-wrap:wrap;
		justify-content:space-between;
	}
</style>
